<template>
	<div class="p_adress">
		<div class="p_user_return">
			<a href="javascript:history.back(-1)"><img src="../../assets/login/返回.png"/></a>
			<span>自动获取地址</span>
			<a href="#/bianjidizhi"><span style="font-size: 1rem;">编辑地址</span></a>
		</div>
		<div class="p_adress_name">
			<span>联系人:</span>
		<input type="text" placeholder="请填写收货人姓名" v-model="name"/>
		</div>
		<div class="p_adress_gender">
			<span>性别:</span>
			<input id="qa" @change="get" type="radio" checked name="sex" value='男士'/><label>男士</label>
			<input id="qa1" @change="get1" type="radio" name="sex" value="女士"/><label>女士</label>
		</div>
		<div class="p_adress_name">
			<span>手机号:</span>
		<input type="text" placeholder="请填写收货手机号" v-model="phone"/>
		</div>
		<div class="p_adress_name">
			<span>收货地址:</span>
		<p id="baidu" @click="dizhi">地址测试</p>
		</div>
		<div class="p_adress_name">
			<span>门牌号:</span>
		<input type="text" placeholder="例: 16号楼5层301室" v-model="arr"/>
		</div>
		<a id="getdizhi" @click="getdizhi()"><button>保存地址</button></a>
	</div>
</template>

<script>
	export default{
		name:"shouhuodizhiguanli",
		data(){
			return{
				name:"",
				phone:"",
				arr:"",
				href:"#/usergeren"
			}
		},
		methods:{
			dizhi:function(){
				function getLocation() {
			if(navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(showPosition, showError);
			} else {
				console.log("浏览器不支持地理定位。");
			}
		}
				getLocation();
				function showPosition(position) {
			var lat = position.coords.latitude; //纬度 
			var lag = position.coords.longitude; //经度 
			
		}
				function showError(error) {
			
			switch(error.code) {
				case error.PERMISSION_DENIED:
					console.log("定位失败,用户拒绝请求地理定位");
					break;
				case error.POSITION_UNAVAILABLE:
					console.log("定位失败,位置信息是不可用");
					break;
				case error.TIMEOUT:
					console.log("定位失败,请求获取用户位置超时");
					break;
				case error.UNKNOWN_ERROR:
					console.log("定位失败,定位系统失效");
					break;
			}
		}
				function showPosition(position) {
			//将我们获取到的经纬度保存到变量中
			var latlon = position.coords.latitude + ',' + position.coords.longitude;

			//baidu接口
			var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location=" + latlon + "&output=json&pois=0"
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				url: url,
				beforeSend: function() {
					$("#baidu").html('正在定位...');
				},
				success: function(data) {
					if(data.status == 0) {
						$("#baidu").html(data.result.formatted_address);
					}
				},
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					$("#baidu").html(latlon + "地址位置获取失败");
				}
			});
		}
			},
			get:function(){
				console.log($("#qa").val())
			},
			get1:function(){
				console.log($("#qa1").val())
			},
			getdizhi:function(){
				var arr1 = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
				if(!arr1.test(this.phone)) {
					console.log("请输入正确的手机号");
				} else {
					$("#getdizhi").attr("href",this.href);
				}
			}
		},
		mounted(){
			$(function(){
		console.log($("#qa").val())
	        })
		}
	}
</script>

<style scoped>
	.p_user_return{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		margin: auto;
	}
	.p_user_return img{
		width: 70%;
		height: 70%;
		margin: 2%;
	}
	.p_user_return span {
		display: inline-block;
		font-size: 2rem;
	}
	.p_user_return a:nth-child(3) {
		color: red;
	}
	.p_adress_name{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 5rem;
		border-bottom: 1px solid #CCCCCC;
	}
	.p_adress_name span{
		display: block;
		font-size: 1.5rem;
		margin-left: 5%;
	}
	.p_adress_name input{
		width: 70%;
		height: 2rem;
		outline: none;
	}
	.p_adress_gender {
		margin: auto;
		line-height: 5rem;
		height: 5rem;
		border-bottom: 1px solid #CCCCCC;
	}
	.p_adress_gender span{
		margin-left: 5%;
		font-size: 1.5rem;
		
	}
	.p_adress button{
		margin-top: 8%;
		width: 80%;
		height: 40px;
		background-color: rgb(255, 129, 173);
		border-radius: 20px;
		border: none;
		outline: none;
		color: white;
		margin-left: 10%;
	}
	#baidu{
		font-size: 1.5rem;
		color: #DF5000;
	}
</style>